<template>
  <div>
    <div class="n-layout-page-header">
      <a-card :bordered="false" title="表格选择器">
        选择器增强，用于展示多列数据表格选择器，可实现单选/多选，还能配置表单查询，项目实测，还是挺实用的
      </a-card>
    </div>
    <a-card :bordered="false" class="mt-3 proCard">
      <a-alert title="单选" type="info"> 这是一个看起来像多选的单选效果，试试看吧 </a-alert>
      <div class="mt-3">
        <a-space align="center">
          <TableSelect
            ref="TableSelectRef"
            labelField="name"
            valueField="id"
            placeholder="请选择内容（单选）"
            :tableProps="{
              rowKey: 'id',
              request: loadDataTable,
              columns: columns,
            }"
            @change="tableSelectChange"
          />
        </a-space>
      </div>
    </a-card>

    <a-card :bordered="false" class="mt-3 proCard">
      <a-alert title="多选" type="info" class="mt-3">
        这个看起来，真的像多选，实际也是多选效果哈
      </a-alert>
      <div class="mt-3">
        <a-space align="center">
          <TableSelect
            ref="TableSelectRef"
            labelField="name"
            valueField="id"
            placeholder="请选择内容（多选）"
            :multiple="true"
            v-model:value="params.value"
            :tableProps="{
              rowKey: 'id',
              request: loadDataTable,
              columns: columns,
              pagination: { simple: true },
            }"
            @change="tableSelectChange"
          />
        </a-space>
      </div>
    </a-card>

    <a-card :bordered="false" class="mt-3 proCard">
      <a-alert title="多选" type="info"> 支持配置表单，搜索查询，多选 </a-alert>
      <div class="mt-3">
        <a-space align="center">
          <TableSelect
            ref="TableSelectRef"
            labelField="name"
            valueField="id"
            placeholder="请选择内容（多选）"
            :multiple="true"
            :formProps="formPropsOption"
            :tableProps="{
              rowKey: 'id',
              request: loadDataTable,
              columns: columns,
              scroll: { maxHeight: 150 },
            }"
            @change="tableSelectChange"
            @form-values-change="formChange"
          />
        </a-space>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { TableSelect } from '@/components/TableSelect';
  import { getTableSelectList } from '@/api/table/list';
  import { columns } from './basicColumns';
  import { FormSchema } from '@/components/Form/index';
  import { ref } from 'vue';

  const schemas: FormSchema[] = [
    {
      field: 'name',
      labelMessage: '这是一个提示',
      component: 'Input',
      label: '名称',
      componentProps: {
        placeholder: '请输入名称',
        onInput: (e: any) => {
          console.log(e);
        },
      },
      rules: [{ message: '请输入名称', trigger: ['blur'] }],
    },
  ];

  const formPropsOption = {
    labelColProps: {
      span: 7,
    },
    wrapperColProps: {
      span: 17,
    },
    rowProps: { gutter: [8, 8] },
    colProps: {
      xs: 12,
      sm: 12,
      md: 12,
      lg: 12,
      xl: 12,
    },
    schemas,
  };

  const params = ref({
    type: 1,
    value: ['冯涛'],
  });

  const formParams = ref({});

  const loadDataTable = async (res) => {
    return await getTableSelectList({ ...formParams.value, ...res });
  };

  function tableSelectChange(list) {
    console.log('list', list);
  }

  function formChange(values) {
    formParams.value = values;
  }
</script>

<style lang="less" scoped></style>
